<template>
    <!-- 搜索 -->
    <div class="list_search">
      <input
        type="text"
        name=""
        id=""
        placeholder="请输入需要的自定义素材"
        v-model.trim="searchCon"
        @focus="listinputFocus"
        @change="listinputChange"
        @onblur="listinputBlur"
      />
      <img
        v-if="ifSearch"
        :src="img.guanbimin"
        alt=""
        @click="allListsearchClick"
      />
      <img v-else :src="img.search" alt="" @click="listsearchClick" />
    </div>
  </template>
  
  <script>
  //utils
  import mixin from "@/utils/mixin";
  export default {
    mixins: [mixin],
    props: ["picListSearch"],
    watch:{
     picListSearch(newval){
        if (newval==false) {
          this.listsearchClick()
        }
     }, 
    },
    data() {
      return {
        searchCon: "",
        ifSearch: false,
      };
    },
    methods: {
      //点击搜索
      listsearchClick() {
        this.$emit("searchval", this.searchCon);
        this.ifSearch = true;
      },
      //点击差显示全部
      allListsearchClick() {
        this.searchCon = "";
        this.ifSearch = false;
        this.$emit("searchallval");
     
      },
      //光标放上去，成为搜索状态
      listinputFocus() {
        this.ifSearch = false;
      },
      listinputBlur() {
        this.$emit("searchtext", this.searchCon);
      },
       listinputChange() {
        this.$emit("searchtext", this.searchCon);
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  @import "../../assets/styles/frame.less";
  .conleftsearch();
  </style>